<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Bootstrap</title>
  </head>
  <body>
    <h1>Layout</h1>
    <h3>two kinds of containers(F12 inspect查看不同)</h3>
    <h3>container用于设置width的大小</h3>
    <div class="container">
      <p>This part is inside a .container class.</p> 
      <p>The .container class provides a responsive fixed width container.(使用mediaquery根据当前的屏幕的width设置container的max-width)</p>   
      <pre>
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}  <strong>并且和相应的media query配合使用,全部使用px作为单位</strong>   
   例如:@media (min-width: 992px)
   .container {
       max-width: 960px;
   }      
      </pre>
    </div>
    <div class="container-fluid">
      <p>This part is inside a .container-fluid class.</p>
      <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport. (永远占据100%)</p>
      <pre>
  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
      </pre>  
    </div>
    <h3>row用于设置flex属性表示使用flex布局</h3>
    <pre>
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
    </pre>
    <h3>col用于设置每个flex-item</h3>
    <p>详细情况请看下一节</p>
    <hr>
    <h2>Grid basics</h2>
    <p>Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.</p>
    <p>.col-*-*有两个参数：第一个参数表示设备，第二个参数表示一个数，最多到12, 将一行分成12分，需要多长用几份</p>
    <p>常用的两栏布局: col-6, 三栏布局: col-4 </p>
    <p>The Bootstrap 4 grid system has five classes:</p>
    <ul>
      <li>.col- (extra small devices - screen width less than 576px)(适用于576以下及以上，全设备通用，手机上，)</li>
      <li>.col-sm- (small devices - screen width equal to or greater than 576px)（只适用于576及以上）</li>
      <li>.col-md- (medium devices - screen width equal to or greater than 768px)</li>
      <li>.col-lg- (large devices - screen width equal to or greater than 992px)</li>
      <li>.col-xl- (xlarge devices - screen width equal to or greater than 1200px)</li>
    </ul>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <table >
      <caption style="caption-side:top;text-align:center"><h3>comparision</h3></caption>
      
      <tr style="text-align:center">
        <th>col</th>
        <th>col-4</th>
        <th>col-sm</th>
        <th>col-sm-4</th>
      </tr>
      <tr>
        <td>
          <pre>
  .col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
          </pre>
        </td>
        <td>
          <pre>
  .col-4 {
    flex: 0 0 33.333333%;
}
          </pre>
        </td>
        <td>
          <pre>
@media (min-width: 576px)
.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
          </pre>
        </td>
        <td>
          <pre>
      @media (min-width: 576px)
      .col-sm-4 {
          flex: 0 0 33.333333%;
          max-width: 33.333333%;
      }
          </pre>
        </td>
      </tr>
    </table>
    <h3>多个class的使用技巧</h3>
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <!-- 在手机上是垂直单栏显示，在电脑上是两栏 -->
    <p><mark>多个class的优先级顺序，不取决于调用的先后顺序，取决于声明顺序</mark></p>
    <div class="row">
        <div class="col-12 col-md-8" style="background-color:red">.col-12 .col-md-8</div>
        <div class="col-6 col-md-4" style="background-color: yellow">.col-6 .col-md-4</div>
    </div>
    <h3>alignment</h3>
    <style>
      table{
        border:1px solid black;
        border-collapse: collapse;
      }
      th,td{
        border: 1px solid black;
      }

    </style>
    <table style="border:solid 1px black">
      <tr>
        <th></th>
        <th>Flex-box</th>
        <th>Bootstrap</th>
      </tr>
      <tr>
        <td>vertical alignemnt</td>
        <td>
          container div 的display属性设置为flex,并设置align-items值 <br>
          或者设置每个item的align-self
        </td>
        <td>
          只需要给 class 为row的div 添加额外的class 例如:align-items-start,<br>
          align-items-center,align-items-end
        </td>
      </tr>
      <tr>
          <td>horizontal alignemnt</td>
          <td>
            container div 的display属性设置为flex,并设置justify-content值 <br>
            或者设置每个item的jusitfy-self
          </td>
          <td>
            只需要给 class 为row的div 添加额外的class 例如:justify-content-start,<br>
            justify-content-center,justify-content-end
          </td>
        </tr>
    </table>

    <h2>Margin and Padding</h2>
    <p>以1rem=16px作为基础</p>
    <ul>
      <li>1表示0.25rem</li>
      <li>2表示0.5rem</li>
      <li>3表示1rem</li>
      <li>4表示1.5rem</li>
      <li>5表示3rem</li>
    </ul>
    <p>.mr-3 表示 margin-right:1rem</p>
    <p>.mr-md-3 表示responsive设计，在手机端的时候进行 mrgin-right:1rem</p>

    <h2>Control the visibility</h2>
    <p>there are two common ways of controling the visibility of an element</p>
    <ul>
      <li>display:none</li>
      <li>visibility:hidden</li>
    </ul>
    <h3>Differentces:</h3>
    <ol>
      <li>display:none不会占据空间也不影响布局，visibility会占用空间也会影响布局</li>
      <li>visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。
        但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别</li>
      <li>
        visibility:hidden不会影响计数(可以参考第一条，一条占空间，一条不占空间)，效果如下<br>
        <ol>
          <li>元素1</li>
          <li style="visibility:hidden">元素2</li>
          <li>元素3</li>
        </ol>
        <ol>
            <li>元素1</li>
            <li style="display:none">元素2</li>
            <li>元素3</li>
          </ol>
      </li>
    </ol>

    <h1>Content</h1>
    <h2>Reboot</h2>
    <p>主要讲述了bootstrap基于Normalize做了很多初始化操作，包括全局设置，标题，字体，list以及table等等</p>
    <h2>Typography</h2>
    <dl class="row">
      <dt class="col-sm-3">Description lists</dt>
      <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    </dl>

    <h1>Components</h1>
    <h2>Alert</h2>
    <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
    <div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>
    <h2>Badges</h2>
    <p>Documentation and examples for badges, our small count and labeling component.</p>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>